<template>
	<div class='page me-login'>
		<div class='logo flex flex-item-center'>
			<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/logo.png' />
		</div>
		<div class='username flex  flex-item-v-center'>
			<label>手机号</label>
			<input type='tel' v-model="phone" @keyup="validation" placeholder='请输入手机号' maxlength="11" size="11" />
		</div>
		<div class='username flex flex-item-v-center'>
			<label>验证码</label>
			<input v-if="phone.length==11&&disabled" type="button" v-model="security" class="codebtn" @click="getSmsCode" />
			<input v-else type="button" v-model="security" class="codebtn" />
			<input type='tel' class='Code' v-model="securityCode" placeholder='请输入验证码' maxlength='6' />
		</div>
		<div class='flex footer loginbtn'>
			<input v-if="phone.length==11&&securityCode.length==6" type="button" value="登录" @click="login" />
			<input v-else type="button" class="nosubmit" value="登录" />
		</div>
		<div class='agreement flex flex-1 flex-item-center'>
			<div>
				<span class="iconchendx flex flex-item-v-center " :class="[isselect ? 'selected':'']" @click="isSelected($event,isselect)">同意</span>
				<a class='agreement_btn' href="https://xhbtest.feiguotech.com/UserRegister.html">花伴商城注册协议</a>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	let timer;
	export default {
		data() {
			return {
				security: '获取验证码',
				isselect: true,
				phone: '',
				times: 60,
				disabled: true,
				securityCode: ''
			}
		},
		computed: {

		},
		methods: {
			isSelected(e, isselect) {
				this.isselect = !isselect
			},
			login() {
				if(!(/^1[34578]\d{9}$/.test(this.phone))) {
					return this.toast('手机号码有误')
				}
				http.post(Api.loginLogin, {
					phone: this.phone,
					securityCode: this.securityCode,
					channelCode: "H5"
				}).then((d) => {
					if(d.code == 200) {
						sessionStorage.setItem('plus_token', d.data.token)
						localStorage.setItem('user_info', JSON.stringify(d.data))
						
						if(this.$route.query.frompage) {
							this.$router.replace(this.$route.query.frompage);
						} else {
							if(window.history.length > 2) { //没有获取到参数直接返回页面
								window.history.go(-1);
							} else {
								this.$router.push("/find");
							}
						}

					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					this.toast('登录失败，请检查您的网络')
				})
			},
			validation() {
				if(this.phone.length == 11) {
					if(!(/^1[34578]\d{9}$/.test(this.phone))) {
						this.toast('手机号码有误')
					}
				}
			},
			getSmsCode() {
				if(!(/^1[34578]\d{9}$/.test(this.phone))) {
					this.toast('手机号码有误')
				}
				http.post(Api.loginGetAuthCode, {
					phone: this.phone
				}).then((d) => {
					if(d.code == 200) {
						this.toast('验证码发送成功，请注意查收')
						this.setCodetime();
						this.disabled = false;
					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					console.log(e)
					this.toast('网络错误,请检查网络')
				})
			},
			setCodetime(e) {
				this.security = (this.times) + "s后获取"
				if(this.times > 1) {
					this.times = this.times - 1
					timer = setTimeout(() => {
						this.setCodetime();
					}, 1000);
				} else {
					this.times = 60;
					this.security = '重发验证码';
					this.disabled = true;
					clearTimeout(timer);
				}
			}
		},
		filters: {}
	}
</script>
<style lang="less" rel="stylesheet/less">
	@import '../../assets/less/main.css';
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
		-webkit-appearance: none;
	}
	body {
		background-color: transparent !important;
	}
	
	.page {
		height: 100%;
		padding: 0 .3rem;
		.logo {
			height: 1.36rem;
			padding: 1rem 0 0 0;
			padding-bottom: .63rem;
			img {
				width: .99rem;
				height: 1.16rem;
			}
		}
		.username {
			position: relative;
			height: 1.04rem;
			background-color: #fff;
			padding-left: 1.24rem;
			font-size: .3rem;
			border-bottom: .01rem solid #E6E6E6;
			align-items: center;
			.codebtn {
				position: absolute;
				right: 0rem;
				height: .49rem;
				padding: 0 .24rem;
				border-radius: .08rem;
				top: .26rem;
				width: 1.6rem;
				line-height: .49rem;
				font-size: .24rem;
				color: #FFFFFF;
				background-color: #FF4C5D;
				border: none;
				z-index: 10;
			}
			label {
				position: absolute;
				height: 1.04rem;
				font-size: .3rem;
				line-height: 1.04rem;
				left: 0;
				padding: 0 .05rem;
			}
			input {
				width: 100%;
				font-size: .3rem;
			}
		}
		input.Code {
			padding-right: 2rem;
		}
		.loginbtn {
			margin-top: .76rem;
			input {
				width: 100%;
				height: 1rem;
				font-size: .32rem;
				line-height: 1rem;
				background-color: #FBC200;
				color: #464646;
				border-radius: .08rem;
				-webkit-border-radius: .08rem;
				-moz-border-radius: .08rem;
			}
			.nosubmit {
				background-color: #bcbcbc;
			}
		}
		.agreement {
			background-color: #FFFFFF;
			padding-top: .4rem;
			width: 100%;
			font-size: .26rem;
			margin-top: 3rem;
			.iconchendx {
				display: inline-block;
				position: relative;
				&::before {
					content: '';
					width: .3rem;
					height: .3rem;
					border-radius: 50%;
					position: absolute;
					top: .02rem;
					left: -0.4rem;
					background: #FFFFFF;
					border: .01rem solid #e6e6e6;
				}
			}
			.selected::before {
				background-image: url("https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/pay_checked.png");
				border: 0;
				background-size: 100%;
			}
			.agreement_btn {
				color: #FBC200;
				padding-left: .01rem;
				text-decoration: underline;
			}
		}
	}
</style>